<!doctype html>
<html lang="en">
<head>
    @include('web.layout.head')
    <link rel="stylesheet" href="{{mix('/css/web/user/shop_pictures.css')}}">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>

@include('web.layout.header')
@include('web.layout.user_tab')
<div class="base_member_content">
    <div class="w1200">
      @include('web.layout.seller_nav')
      <div class="nav_right flr">
            <div class="base_content">
                <div class="line_title">商铺图片</div>
                <div class="content">
                    <div class="mrtop">
                        <span class="fl">添加产品所有图片内容</span>
                        <a class="fr btn_add">+ 添加图片</a>
                    </div>
                    <div class="templet_list fl">
                      <ul>
                        <li>
                            <div class="img fl">
                              <img src="{{asset('/img/web/user/video1.jpg')}}">
                            </div>
                            <img data-id="1" class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                        </li>
                        <li>
                            <div class="img fl">
                              <img src="{{asset('/img/web/user/templet_img.jpg')}}">
                            </div>
                            <img data-id="2" class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                        </li>
                        <li>
                            <div class="img fl">
                              <img src="{{asset('/img/web/user/templet_img.jpg')}}">
                            </div>
                            <img data-id="3" class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                        </li>
                        <li>
                            <div class="img fl">
                              <img src="{{asset('/img/web/user/templet_img.jpg')}}">
                            </div>
                            <img class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                        </li>
                        <li>
                            <div class="img fl">
                              <img src="{{asset('/img/web/user/templet_img.jpg')}}">
                            </div>
                            <img class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                        </li>
                        <li>
                            <div class="img fl">
                              <img src="{{asset('/img/web/user/templet_img.jpg')}}">
                            </div>
                            <img class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                        </li>
                        <li>
                            <div class="img fl">
                              <img src="{{asset('/img/web/user/templet_img.jpg')}}">
                            </div>
                            <img class="del_img" src="{{asset('/img/web/user/renovation_del_img.png')}}">
                        </li>
                      </ul>
                    </div>
                </div>
                <div class="page">
                    include('web.common.paginate')
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg_h"></div>
<div class="pictures_bombbox">
    <div class="h_top"><h2>上传图片</h2><a class="close_box">×</a></div>
    <div class="fl shu_box mt30">
        <span>设置标题</span>
        <input type="text" name="pictures_title" class="pictures_title">
        <p class="jm_error"></p>
    </div>
    <div class="fl shu_box">
      <span>设置图片</span>
        <img id="btn_uploadimg" src="{{asset('/img/web/user/a11.png')}}">
        <input type="hidden" name="pictures_img" class="pictures_img">
        <p class="jm_error"></p>
    </div>
    <div class="btn_box">
        <div class="btn_cancel close_box">取消</div>
        <div class="btn_confirm delivery_confirm" data-id = "1">确定</div>
    </div>
</div>
<form id="uploadForm" action="{{url('uploads/images')}}" method="post">
    {{csrf_field()}}
    <input style="display: none;" name="image" type="file" class="inputFile" />
</form>
@include('web.layout.footer')
<script type="text/javascript">
$(function(){
  //编辑
  $('.btn_add').click(function(){
      var id = $(this).attr('data-id');
      $('.bg_h').show();
      $('.pictures_bombbox').show();
   })
  $('.close_box').click(function(){
      $(".pictures_img").val('');
      $('.pictures_title').val('');
      $('.jm_error').html('')
      $('.bg_h').hide();
      $('.pictures_bombbox').hide();
  });

  $('.delivery_confirm').click(function(){
      var id = $(this).attr('data-id');
      var pictures_title = $('.pictures_title').val();
      $('.jm_error').html('');
      if($.trim(pictures_title) == ''){
        $('.pictures_title').parent().find('.jm_error').html('请输入设置标题');
        return false;
      }
      var pictures_img = $('.pictures_img').val();
      if($.trim(pictures_img) == ''){
        $('.pictures_img').parent().find('.jm_error').html('请输入设置图片');
        return false;
      }
      $.ajax({
          url: "",
          type: "POST",
          data: {id:id,pictures_title:pictures_title,pictures_img:pictures_img},
          contentType: false,
          cache: false,
          processData: false,
          success: function (res) {
              if (res.status == 0){
                    layer.alert("保存成功", {
                        icon: 1
                    }, function () {
                        location.reload();
                    });
              } else {
                  layer.alert('保存失败', {
                      title:'提示',
                      icon: 2
                  });
              }
          },
          error: function () { }
      });
  });


  // 图片上传点击
  $('#btn_uploadimg').click(function () {
      $('.inputFile').trigger('click');
  });
  // 选择完要上传的文件后, 直接触发表单提交
  $('input[name=image]').on('change', function () {
      if ($.trim($(this).val())) {
          $("#uploadForm").trigger('submit');
      }
  });

  // 图片上传
  $("#uploadForm").on('submit', function (e) {
      e.preventDefault();
      $.ajax({
          url: "{{url('uploads/images')}}",
          type: "POST",
          data: new FormData(this),
          contentType: false,
          cache: false,
          processData: false,
          // 显示加载图片
          success: function (res) {
              if (res.status == 0){
                  var img_path = '' + res.path;
                  $(".pictures_img").val(res.path);
                  $("#btn_uploadimg").attr('src',res.path)
              } else {
                  layer.alert('图片上传失败', {
                      title:'提示',
                      icon: 2
                  });
              }
          },
          error: function () { }
      });
  });


  //删除
  $('.del_img').click(function(){
      var id = $(this).attr('data-id');
      layer.confirm('确定删除？', {
          btn: ['确定', '取消'] //可以无限个按钮
      }, function (index) {
          $.ajax({
              url: "",
              type: 'delete',
              dataType: 'json',
              data: {'id': id},
              success: function (data) {
                  if (0 == data.code) {
                      layer.alert("删除成功", {
                          icon: 1
                      }, function () {
                          location.reload();
                      });
                  } else {
                      layer.alert(data.message, {
                          icon: 2
                      });
                  }
              }
          });
      }, function (index, layero) {
          layer.close(index);
      });
  });

})
</script>
</body>
</html>